import React, { useState, useEffect } from 'react';
import { HistoryProvider } from './contexts/HistoryContext';
import BugForm from './components/BugForm';
import OutputResult from './components/OutputResult';
import HistoryList from './components/HistoryList';
import { HistoryItem } from './types/history';

const ErrorGeneratorContent: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [formData, setFormData] = useState({
    remarks: '',
    apiAddress: '',
    requestMethod: '',
    requestHeaders: '',
    requestBody: '',
    errorMessage: ''
  });

  useEffect(() => {
    setLoading(false);
  }, []);

  // 实现恢复历史记录的功能
  const handleRestoreHistory = (item: HistoryItem) => {
    setFormData(item.data);
  };

  return (
    <div className='min-h-svh w-full py-6 bg-white'>
      <div className='max-w-7xl mx-auto p-6 flex flex-col gap-6'>
        <div className='flex gap-6 flex-wrap'>
          {loading && <div className='fixed inset-0 bg-white bg-opacity-80 flex justify-center items-center text-2xl text-blue-500 z-50'>加载中...</div>}
          <BugForm
            formData={formData}
            setFormData={setFormData}
          />
          <OutputResult
            formData={formData}
            setFormData={setFormData}
          />
        </div>
        <HistoryList onRestoreHistory={handleRestoreHistory} />
      </div>
    </div>
  );
};

const ErrorGenerator: React.FC = () => {
  return (
    <HistoryProvider>
      <ErrorGeneratorContent />
    </HistoryProvider>
  );
};

export default ErrorGenerator;
